<!--
 * @Author: vlesil 11236032+vlesil@user.noreply.gitee.com
 * @Date: 2022-10-15 15:11:41
 * @LastEditors: vlesil 11236032+vlesil@user.noreply.gitee.com
 * @LastEditTime: 2022-10-15 16:27:28
 * @FilePath: \team-cooperation-project\src\pages\admin\check\OrderComment.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 订单评论审核 -->
  <div>
    <!-- 头部 -->
    <div class="header">
      <el-form ref="form" :model="params" :inline="true">
        <el-form-item>
          <el-input v-model="params.content" placeholder="请输入关键字" clearable />
        </el-form-item>
        <el-form-item>
          <el-select v-model="params.status" placeholder="请选择状态" clearable>
            <el-option label="未审核" value="未审核" />
            <el-option label="通过" value="通过" />
            <el-option label="不通过" value="不通过" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="toSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- /头部 -->
    <!-- 体部 -->
    <div class="center">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
      >
        <el-table-column type="index" label="序号" />
        <el-table-column prop="content" label="评论内容" />
        <el-table-column prop="customerId" label="顾客编号" width="180" />
        <el-table-column prop="orderId" label="订单编号" width="180" />
        <el-table-column prop="commentTime" label="评论时间" width="180">
          <template slot-scope="scope">
            {{ scope.row.commentTime | parseTime }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="评论状态" width="180">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status === '通过'" type="success" effect="dark">
              {{ scope.row.status }}
            </el-tag>
            <el-tag v-else-if="scope.row.status === '不通过'" type="danger" effect="dark">
              {{ scope.row.status }}
            </el-tag>
            <el-tag v-else type="info" effect="dark">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button type="danger" icon="el-icon-delete" circle @click="toDelete(scope.row.id)" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- /体部 -->
    <!-- 底部 -->
    <div class="footer">
      <el-pagination
        :current-page="params.page"
        :page-sizes="[1, 2, 10, 20]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- /底部 -->
  </div>
</template>

<script>
import { orderComment, deletedOrderComment } from '@/api/orderComment'
export default {
  data() {
    return {
      // 分页信息
      params: {
        page: 1,
        pageSize: 10
      },
      // 表格信息
      tableData: [],
      // 总条数
      total: 0
    }
  },
  computed: {},
  created() {
    this.getOrderComment()
  },
  mounted() { },
  methods: {
    // 查询评论信息的方法
    async getOrderComment() {
      const res = await orderComment(this.params)
      this.tableData = res.data.list
      this.total = res.data.total
    },
    // 搜索按钮
    toSearch() {
      // 开启加载动画
      this.loading = true
      for (const key in this.params) {
        if (!this.params[key]) {
          delete this.params[key]
        }
      }
      this.getOrderComment()
      // 结束加载动画
      this.loading = false
    },
    // 删除方法
    toDelete(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await deletedOrderComment(id)
        this.getOrderComment()
        this.$message({
          type: 'success',
          message: res.message
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 页码条数发生改变的方法
    handleSizeChange(pageSize) {
      this.params.pageSize = pageSize
      this.params.page = 1
      this.getOrderComment()
    },
    // 当前页码发生改变出发的方法
    handleCurrentChange(page) {
      this.params.page = page
      this.getOrderComment()
    }
  }
}
</script>
<style scoped>

</style>
